{% extends 'basic_app/master.html' %}
{% load my_filters %}
{% block tag_left %}
    {% include 'oratk_app/tag_left_user.html' %}
{% endblock %}
{% block title %}
    <title>ORATK</title>
{% endblock %}
{% block userinfo %}

    <style>
        #ins_leftName, #ins_rightName, #sms_contact_leftName, #sms_contact_rightName, #email_contact_leftName, #email_contact_rightName {
            float: left;
            width: 450px;
            height: 600px;
        }

        #btn {
            float: left;
            width: 100px;
            height: 200px;
        }

        #ins_toRight, #ins_toLeft, #sms_contact_toRight, #sms_contact_toLeft, #email_contact_toRight, #email_contact_toLeft {
            margin-top: 50px;
            margin-left: 30px;
            width: 50px;
        }

        .border {
            height: 200px;
            padding: 0px;
        }
    </style>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h3 class="page-header">定制模板</h3>
        <form name="Form" class="form-horizontal" role="search">
            <div class="form-group">
                <label class="col-sm-3 control-label">未添加的查询项信息</label>
                <label class="col-sm-3 control-label">已添加的查询项信息</label>
            </div>
            <div class="form-group">
                <div class="border">
                    <label class="col-sm-2 control-label">请选择查询项：</label>
                    <select id="ins_leftName" multiple="multiple">
                        {% for i in point_result %}
                            <option>{{ i }}</option>

                        {% endfor %}
                    </select>
                    <div id="btn">
                        <input type="button" id="ins_toRight" value="-->"><br>
                        <input type="button" id="ins_toLeft" value="<--">
                    </div>
                    <select id="ins_rightName" multiple="multiple">
                        <option selected  style="color:red;">monitor_report_head--必选</option>
                    </select>
                </div>
                &nbsp &nbsp &nbsp
                <button id="submit" type="button" class="btn btn-primary" onclick="button_submit()">保存模板</button>

            </div>
        </form>
    </div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <div>&nbsp&nbsp&nbsp&nbsp</div>
        <h3 class="page-header">已存在模板</h3>
        <div id="tab_detail" table_count={{ table_count }}></div>

        <table class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
                <th>id</th>
                <th>模板名字</th>
                <th>模板状态</th>
                <th>模板内容</th>
                <th>备注</th>
                <th>修改时间</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tabbody">
            {% for i in current_page %}
                <tr>
                    <td>{{ i.id }}</td>
                    <td>{{ i.name }}</td>
                    <td style="color: {{ i.set_color }}">{{ i.status }}</td>
                    <td><a style="cursor:pointer;" onclick="show_template_point('{{ i.id }}')">查看模板内容</a></td>
                    <td>{{ i.remark | default_if_none:"" }}</td>
                    <td>{{ i.chtime |date:'Y-m-d H:i:s'}}</td>
                    <td>{{ i.crtime |date:'Y-m-d H:i:s'}}</td>
                    <td><a href="/oratk_app/oratk_monitor_template_modify?id={{ i.id }}&action=disable" onclick="if(confirm('确认禁用吗？')==false)return false;">禁用</a>
                        <a href="/oratk_app/oratk_monitor_template_modify?id={{ i.id }}&action=able">启用</a>
                        <a href="/oratk_app/oratk_monitor_template_modify?id={{ i.id }}&action=delete" onclick="if(confirm('确认删除吗？')==false)return false;">删除</a>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        {#        以上是分页#}
        {% include 'basic_app/paginator.html' %}
    </div>


    {#    查看脚本内容的模态框#}
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog_edit">
            <div class="modal-content" style="width:1000px" id="docModalContent">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">添加模板</h4>
                </div>
                <div>&nbsp</div>
                <div>&nbsp</div>
                <form class="form-horizontal" id="editForm">
                    <div class="form-group" hidden>
                        <label class="col-sm-2 control-label">id：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" class="form-control" id="v_id"
                                   placeholder="id">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">请输入模板名字：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" class="form-control" id="template_name"
                                   placeholder="模板名字">
                        </div>
                    </div>
                </form>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="template_report_submit()">提交</button>
                </div>

            </div><!-- /.modal-content -->


        </div><!-- /.modal -->
    </div>
    <div class="modal fade" id="myModal_point_view" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog_edit">
            <div class="modal-content" style="width:1500px" id="docModalContent_2">

                        </div>

                    </div>
    </div>


{% endblock %}

{% block script %}
    <script>
        //即时按钮执行前判断输入框是否有空值

        $(function () {
            //实例信息
            $("#ins_toRight").click(function () {
                $("#ins_rightName").append($("#ins_leftName > option:selected"));
            });
            $("#ins_toLeft").click(function () {
                $("#ins_leftName").append($("#ins_rightName > option:selected"));
            });
        })


        function button_submit() {
            $("#ins_rightName option").prop("selected", "selected");
            var template_report = $('#ins_rightName').val();
            if (JSON.stringify(template_report) == 'null') {
                alert('要保存的查询项 为空');
                return false;
            } else {
                //调用模态框
                $('#myModal').modal('show')
            }
        }

        function template_report_submit() {
            url = '/oratk_app/oratk_monitor_template_mgr';
            var template_report = $('#ins_rightName').val();
            var template_name = $('#template_name').val();

            $.ajax({
                type: "POST",
                data: {
                    'template_report': JSON.stringify(template_report),
                    'template_name': template_name
                },
                url: url, //后台处理函数的url
                cache: false,
                dataType: "html",
                beforeSend: function () {
                    showLoading()
                    $('#submit').button('loading')
                },
                complete: function () {
                    hideLoading()
                    $('#submit').button('reset')
                },
                success: function (result) {
                    if (result.substr(0, 8) == "AJAX_ERR") {
                        alert(result);
                    } else {
                        {# console.log(1);#}
                        $('#myModal').modal('hide')
                        location.reload();

                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                }
            })
        }

        function show_template_point(id){
            url = '/oratk_app/oratk_monitor_template_modify'
            $.ajax({
                type: "POST",
                data: {
                    'id': id
                },
                url: url, //后台处理函数的url
                cache: false,
                dataType: "html",
                success: function (result) {
                    if (result.substr(0, 8) == "AJAX_ERR") {
                        alert(result);
                    } else {
                        $("#docModalContent_2").append().html(result)
                        $('#myModal_point_view').modal('show')
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                }
            })
        }

 //查看编辑脚本内容模态框居中
        $("#myModal_point_view").on('show.bs.modal', function () {
            modalResize_edit()
        })
        //编辑脚本内容模态框居中
        $(window).resize(function () {
            modalResize_edit();
        })

        function modalResize_edit() {
            var winWidth = $(document.body).width();
            var modalWidth = $("#docModalContent_2").width();
            var width = (winWidth - modalWidth) / 2 + "px"
            console.log(winWidth, modalWidth, width)
            $("#myModal_point_view").find(".modal-dialog").css({
                'margin-left': width
            });
        }

    </script>
{% endblock %}
